<template>
  <div class="page-wrap">
    <div class="nolist" v-if="order_list_comm.length <= 0"><span>委托暂无数据...</span></div>
    <div v-else v-for="(item, index) in order_list_comm" :key="index" class="chicang_content">
      <div class="list_name">
        <span>合约名称</span>
        <span>{{ item.symbol_cn }}</span>
      </div>
      <div class="list_text">
        <div>
          <span>合约代码：</span>
          <span>{{ item.symbol }}</span>
        </div>
        <div>
          <span>买卖：</span>
          <span>{{ item.rise_fall == 'RISE' ? '买' : '卖' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>单号：</span>
          <span>{{ item.order_number }}</span>
        </div>
        <div>
          <span>委托价：</span>
          <span>{{ Number(item.open_price) || '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>止盈价：</span>
          <span>{{ Number(item.stop_profit_price ) || '0.00' }}</span>
        </div>
        <div>
          <span>止损价：</span>
          <span>{{ Number(item.stop_loss_price ) || '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>开仓价：</span>
          <span>{{ Number(item.open_price ) || '0.00' }}</span>
        </div>
        <div>
          <span>结算价：</span>
          <span>{{ Number(item.close_price)|| '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>手续费：</span>
          <span>{{ Number(item.service_fee) || '0.00' }}</span>
        </div>
      </div>
      <div class="list_text">
        <div>
          <span>成交手数：</span>
          <span>{{ item.volume }}</span>
        </div>
        <div class="text_last">
          <span>委托时间：</span>
          <span>{{ item.created_at }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*,, 推送数据 */,
  }),
  data() {
    return {
      order_list_comm: [], //委托
      chicangtime: null
    };
  },
  watch: {},

  mounted() {
    this.loadtime();
  },
  beforeDestroy() {
    clearInterval(this.chicangtime);
    this.chicangtime = null;
  },
  methods: {
    loadtime() {
      this.get_order_list_comm(); // 委托
      this.chicangtime = setInterval(() => {
        this.get_order_list_comm(); // 委托
      }, 2000);
    },
    // 委托
    get_order_list_comm() {
      this.$get('addons/tf-futures/order-reason/olist').then(res => {
        if (res.code == 200) {
          this.order_list_comm = res.data;
        } else {
          console.log(res.message || '获取委托列表失败');
        }
      });
    }
  }
};
</script>

<style scoped>
.redColor {
  color: red;
}
.greenColor {
  color: #00ff00;
}

.chicang_content {
  width: 100%;
  height: 4.5rem;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-around;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  margin-top: 0.2rem;
  border-bottom: 0.013333rem solid #333;
}

.list_name {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.375rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  color: #e96302;
}

.list_text {
  width: 100%;
  height: 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
  font-size: 0.3rem;
  color: #ccc;
}

.text_last {
  color: #909090;
  margin-top: 0.2rem;
}

.nolist {
  font-size: 0.45rem;
  letter-spacing: 2px;
  color: #666;
  text-align: center;
  margin-top: 3rem;
}
</style>
